
<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <assess-result-edit ref="memeberEdit" v-on:save-finished="searchUser"></assess-result-edit>
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="姓名" size="small" v-model="search.name">
            <el-button slot="append" icon="el-icon-search" @click="searchUser()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" 
            v-show="permission.add" @click="handleCreateUser()">添加</el-button>
        </el-col>        
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableList" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
            <el-table-column prop="fileNumber" label="档案号" header-align="center"></el-table-column>
            <el-table-column prop="memberName" label="姓名" header-align="center"></el-table-column>
            <el-table-column prop="assessDate" :formatter="dateFormatter" label="评测日期" header-align="center" width="100"></el-table-column>
            <el-table-column prop="assessItem1" label="风险程度" header-align="center"></el-table-column>
              <!-- <template slot-scope="scope">
                <span v-bind:class="{ 'user-locked': scope.row.locked, 'user-not-locked': !scope.row.locked }">{{ scope.row.locked ? "禁用" : "可用" }}</span>
              </template> -->
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="permission.edit" type="primary" size="mini"
                  @click="handleEditUser(scope.$index, scope.row)">编辑</el-button>
                <el-button v-show="permission.remove" type="danger" size="mini"
                  @click="handleDeleteUser(scope.$index, scope.row)">删除</el-button>
                <!-- <el-button v-show="permission.remove" type="danger" size="mini"
                  @click="findReport(scope.$index, scope.row)">查看报告</el-button> -->
              </template>
            </el-table-column>
          </el-table>        
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background     
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>     
        </el-col>
      </el-row>    
    </el-col>
  </el-row>
</template>

<script>
import UserEdit from '@/components/user/userEdit'
import ChangePassword from '@/components/user/changePassword'
import { listUser, getUser, removeUser, listUserRole } from '@/api/user'
import { listResourcePermission } from '@/api/resource'
import { listAllRole } from '@/api/role'

import { listAssessResult,getAssessResult,deleteAssessResult } from '@/api/assessResult'
import memberEdit from '@/components/member/memberEdit'
import assessResultEdit from '@/components/assessResult/assessResultEdit'

export default {
  data() {
    return {
        //总数据
      tableList: [],
      //按钮权限开关
      permission: {
        add: false,
        edit: false,
        remove: false
      },
      //数据总数
      tableTotal: 0,
        //查询参数对象
      search: {
        name: "",
        sort: "",
        offset: 1,
        limit: 10,
        currentPage: 1,
        type:3
      },
      //加载标志
      loading: true    
    };
  },
  methods: {
    //日期格式化
    dateFormatter(row, column){
      return this.getYMDHMS(row.assessDate)
    },
    getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')

      return year + '-' + month + '-' + date
    },
      //查询，并显示更新数据
    searchUser() {
      this.loading = true
      listAssessResult(this.search)
      .then(response => {
        
        this.tableList = response.data.list
        this.tableTotal = response.data.total
        this.loading = false
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    //分页-大小变化事件
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1
      this.searchUser()
    },
    //分页-当前页变化事件
    handleCurrentChange(val) {
      this.search.offset = val
      this.search.currentPage = val
      this.searchUser()
    },
    //加载添加模态框的数据
    async handleCreateUser() {
      this.loading = true
      try {
        let [allRoleResp] = await Promise.all([
          listAllRole()
        ])
        //打开添加模态框
        this.$refs.memeberEdit.$emit('openAddUserDialog',3)
        this.loading = false
      } catch(error) {
        this.outputError(error)        
      }      
    },
    //加载编辑模态框的数据
    async handleEditUser(index, row) {
      this.loading = true
      try {
        let [member] = await Promise.all([
          getAssessResult(row.id),
         
        ])
        //打开编辑模态框
        this.$refs.memeberEdit.$emit('openEditUserDialog', member.data)
        this.loading = false
      } catch(error) {
        this.outputError(error)       
      }
    },
    //加载修改密码框的数据
    handleChangePassword(index, row) {
      this.loading = true
      getUser(row.id)
      .then(response => {
          //打开修改密码模态框
        this.$refs.changePassword.$emit('openChangePasswordDialog', response.data)
        this.loading = false
      })
      .catch(error => {
        this.outputError(error)        
      })
    },
    //查看报告
    findReport(index, row){
      this.loading = true
      
    },    
    //删除
    handleDeleteUser(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        deleteMember(row.id)
        .then(response => {
          this.loading = false
          this.searchUser()
        })
        .catch(error => {
          this.outputError(error)                
        })
      })
      .catch(() => {})
    },
    //页面初始化
    async pageInit() {
      this.loading = true
      try {
        let [memberDataResp, getPermissionResp] = await Promise.all([
          listAssessResult(this.search),
          listResourcePermission(this.$route.meta.routerId)
        ])
        console.log(memberDataResp.data.list)
        this.tableList = memberDataResp.data.list
        this.tableTotal = memberDataResp.data.total
        //资源权限验证，显示相应按钮
        this.permission.add = getPermissionResp.data.find(item => {
          return item.resourcePermission === "assessResult"
        })
        this.permission.edit = getPermissionResp.data.find(item => {
          return item.resourcePermission === "assessResult"
        })
        this.permission.remove = getPermissionResp.data.find(item => {
          return item.resourcePermission === "assessResult"
        })
        this.loading = false
      } catch(error) {
        this.outputError(error)        
      }        
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })      
    }    
  },
  components: { UserEdit, ChangePassword,memberEdit ,assessResultEdit},
  created() {
    this.pageInit()
  }
}
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.user-locked {
  color: red;
}
.user-not-locked {
  color: green;
}
</style>

